<template>
	<view class="order">
		<!-- 顶部导航 -->
		<view class="order-t">
			
			<block v-if="type_=='0'">
				<view @tap="changeNav(item.id)" :class="['order-t-i',navId==item.id?'active':'']"
				v-for="(item,index) in navList" :key="item.id">
				{{item.title}}
			</view>
				
			</block>
			<block v-else>
				<view @tap="changeNav(item.id)" :class="['order-t-i','weibao',navId==item.id?'active':'']"
					v-for="(item,index) in weibapList" :key="item.id">
					{{item.title}}
				</view>
			</block>
		</view>
		<!-- 工单列表 -->
		<view class="order-c-box">
			<view class="order-c" @tap="jumpDetail(item.id,item.service.warranty_id)" v-for="(item,index) in order" :key="item.id">
				<view class="order-c-t">
					<view class="order-c-t-l">
						工单ID:{{item.workID}}
					</view>
					<view class="order-c-t-r" style="color: #FFAB00;font-weight: bold;">
						{{item.status}}
					</view>
				</view>
				<view class="order-c-c">
					{{item.describe}}
				</view>
				<view class="order-c-x">
					<view class="order-c-x-l">
						设备名称：{{item.equipment.name||"暂无信息"}}
					</view>
					<view class="order-c-x-r">
						型号：{{item.equipment.marking||"暂无信息"}}
					</view>
				</view>
			</view>

		</view>
		<empty v-if="order.length==0"></empty>
	</view>
</template>

<script>
	import empty from '../../components/empty.vue'
	export default {
		components: {
			empty
		},
		data() {
			return {
				type_: null, //0报修工单  1 维保工单
				navId: 1,
				navList: [{//  0报修工单
					id: 4,
					title: '已报修'
				}, {
					id: 1,
					title: '进行中'
				}, {
					id: 2,
					title: '待结单'
				}, {
					id: 3,
					title: '已完成'
				}, {
					id: 0,
					title: '全部'
				}],
				weibapList: [{// 1 维保工单
					id: 1,
					title: '进行中'
				}, {
					id: 3,
					title: '已完成'
				}, {
					id: 0,
					title: '全部'
				}],
				order: [],
				page: 1,
				last_page: 1
			}
		},
		onLoad(e) {
			this.navId = e.id //navid
			this.type_ = e.type //订单类型  0报修工单  1 维保工单
			switch (e.type) {
				case '1':
					uni.setNavigationBarTitle({
						title: '维保工单'
					})
					this.navId=1
					break;
				case '0':
					uni.setNavigationBarTitle({
						title: '报修工单'
					})
					break;
			}

		},
		onShow() {
			this.page = 1
			this.last_page = 1
			this.order = []
			this.getList()
		},
		methods: {
			//点击导航栏
			changeNav(id) {
				this.navId = id
				this.page = 1
				this.last_page = 1
				this.order = []
				this.getList()
			},
			//详情跳转
			jumpDetail(id,warranty_id) {
				/* id=' + this.order_detail.id+'&warranty_id='+this.order_detail.warranty_id */
				wx.navigateTo({
					url: '../weibaoOrder/weibaoOrder?id=' + id+'&warranty_id='+warranty_id 
				})
			},
			//获取工单列表
			getList() {
				this.$https.post('/warranty/hospList', {
					type: this.type_, //0我的工单 1维保工单
					status: this.navId //1=进行中，2=待确认，3=已完成，0=全部，4=已报修
				}).then(res => {
					if (res.data.last_page != 0) {
						this.last_page = res.data.last_page
					}
					this.order = this.order.concat(res.data.data)
					
				/* 	console.log(this.order ,198);return */
					this.order.forEach(item => {
					
						if(item.status==0&&this.navId==4){
							item.status='已报修'
						}else{
							item.status=this.order_status(item.status)
						}
					})
				})
			},
			/* 订单状态判断 */
			order_status(i) {
				switch (i) {
					case '0':
						return "申请中";
					case '1':
						return "进行中";
					case '2':
						return "待结单";
					case '3':
						return "已完成";
					case '4':
						return "已报修";
						default :{
							return i
						}
				}
			},
		},

		// onReachBottom() {
		// 	if (this.page != this.last_page) {
		// 		this.page = this.page + 1
		// 		this.getList()
		// 	}
		// },
	}
</script>

<style lang="scss" scoped>
	.weibao{
		width: 33.3%;
		text-align: center;
	}
	.order-c-box {
		padding: 24rpx 32rpx;
		background-color: #f6f7fb;
	}

	.active {
		color: $public-oclor !important;
		position: relative;
	}

	.active::before {
		content: '';
		width: 48rpx;
		height: 4rpx;
		position: absolute;
		bottom: 0px;
		left: 50%;
		margin-left: -24rpx;
		background-color: $public-oclor;
	}

	/* 待审核 */
	.status1 {
		color: #FF6619;
	}

	/* 进心中 */
	.status2 {
		color: #FFAB00;
	}

	/* 已完成 */
	.status3 {
		color: $public-oclor;
	}

	.order {
		&-t {
			display: flex;
			justify-content: space-between;
			padding: 30rpx 36rpx;

			&-i {
				font-size: 28rpx;
				color: #303030;
				line-height: 33rpx;
				font-weight: 400;
				padding-bottom: 24rpx;
			}
		}

		&-c {
			background: #FFFFFF;
			margin-bottom: 20rpx;

			&-t {
				display: flex;
				justify-content: space-between;
				box-shadow: inset 0px -1rpx 0px 2rpx rgba(235, 238, 241, 1);
				border-radius: 8rpx 8rpx 0px 0px;
				padding: 22rpx 24rpx;

				&-l {
					font-size: 28rpx;
					font-weight: 500;
					color: #303030;
				}

				&-r {
					font-size: 28rpx;
					font-weight: 500;
					line-height: 33rpx;
				}
			}

			&-c {
				border-bottom: 2rpx solid #f6f7fb;
				border-top: 1rpx solid #f6f7fb;
				font-size: 24rpx;
				height: 105rpx;
				font-weight: 400;
				color: #969699;
				line-height: 36rpx;
				padding: 22rpx 24rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				word-break: break-all;
				box-sizing: border-box;
			}

			&-x {
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;
				font-weight: 400;
				color: #969699;
				line-height: 36rpx;
				padding: 28rpx 24rpx 24rpx;

				&-l {}

				&-r {}
			}
		}

	}
</style>
